<template lang="">
  <div class="select_container">
    <el-select :popper-append-to-body="false" v-model="searchParams.gradeValue" clearable placeholder="请选择年级" @change="handleChangeSelect('grade')" style="width: 150px">
      <el-option v-for="item in gradeOpt" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>

    <el-select
      :popper-append-to-body="false"
      :no-data-text="noDataGrade"
      class="header_select"
      @change="handleChangeSelect('class')"
      v-model="searchParams.classValue"
      clearable
      placeholder="请选择班级"
      style="width: 150px"
    >
      <el-option v-for="item in classOpt" :key="item.id" :label="item.rename" :value="item.id" />
    </el-select>

    <el-select
      :popper-append-to-body="false"
      :no-data-text="noDataClass"
      v-model="searchParams.courseValue"
      @change="handleChangeSelect('course')"
      clearable
      placeholder="请选择学科"
      style="width: 150px"
    >
      <el-option v-for="item in courseOpt" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>

    <el-select
      :no-data-text="noDataSubject"
      :popper-append-to-body="false"
      class="header_select"
      @change="handleChangeSelect('className')"
      v-model="searchParams.className"
      clearable
      placeholder="请选择课程名称"
      style="width: 150px"
    >
      <el-option v-for="item in nameOpt" :key="item.course_id" :label="item.course_name" :value="item.course_id" />
    </el-select>
  </div>
</template>
<script>
export default {
  props: {
    selectInfo: {
      type: Object,
      default: () => {}
    },
    // 选择器选择原数据  选择对比数据
    type: {
      type: String,
      default: ""
    }
  },
  emit: ["search"],
  data() {
    return {
      noDataGrade: "请选择年级", //
      noDataClass: "请选择班级", //
      noDataSubject: "请选择学科", //
      searchParams: {
        gradeValue: "",
        classValue: "",
        courseValue: "",
        className: ""
      },
      classOpt: [],
      gradeOpt: [],
      courseOpt: [],
      nameOpt: []
    };
  },
  methods: {
    handleChangeSelect(type) {
      console.info(type);
      const { classValue, gradeValue, courseValue } = this.searchParams;
      switch (type) {
        case "grade":
          if (gradeValue) {
            this.getClassOptions();
          } else {
            this.courseOpt = [];
            this.classOpt = [];
            this.nameOpt = [];
            this.searchParams.courseValue = "";
            this.searchParams.classValue = "";
            this.searchParams.className = "";
          }
          break;
        case "class":
          if (classValue) {
            this.getSubjectOptions();
          } else {
            this.courseOpt = [];
            this.searchParams.courseValue = "";
          }
          break;
        case "course":
          if (courseValue) {
            this.getClassNameOptions();
          } else {
            this.nameOpt = [];
            this.searchParams.className = "";
          }
          break;
        case "className":
          if (this.searchParams.className)
            this.$emit("search", {
              id: this.searchParams.className,
              type: this.$props.type
            });
          break;
      }
    },

    // 获取课程名称
    getClassNameOptions(id) {
      const params = {
        page_index: 1,
        page_size: 9999,
        class_id: this.searchParams.classValue,
        subject_id: this.searchParams.courseValue
      };

      if (id) params.teacher_id = id;
      const success = (res) => {
        if (res.data.data.length === 0) {
          this.noDataSubject = "暂无数据";
        }
        this.nameOpt = res.data.data;
      };
      const fail = (res) => {};
      this.$ajax({
        url: "api/ainew/aiVideoList",
        method: "get",
        params,
        func: {
          success,
          fail
        }
      });
    },

    // 获取学科
    getSubjectOptions() {
      const success = (res) => {
        if (res.data.length === 0) {
          this.noDataClass = "暂无数据";
        }
        this.courseOpt = res.data;
      };
      this.$ajax({
        url: "api/cate/subject",
        method: "get",
        params: {
          type: 2,
          org_id: this.searchParams.gradeValue,
          status: 1
        },
        func: {
          success: success
        }
      });
    },

    // 获取班级
    getClassOptions() {
      const success = (res) => {
        if (res.data.length === 0) {
          this.noDataGrade = "暂无数据";
        }
        this.classOpt = res.data;
      };
      this.$ajax.get("api/org/org", {
        params: {
          level: 4,
          pid: this.searchParams.gradeValue,
          direction: "balance"
        },
        func: { success: success }
      });
    },

    // 获取年级
    getGradeOptions() {
      const success = (res) => {
        const data = res.data;

        this.gradeOpt = data;
      };
      this.$ajax({
        url: "api/org/all_grade",
        method: "get",
        func: {
          success: success
        }
      });
    },

    // 回显选项
    echoSelect() {
      const { selectInfo } = this.$props;
      if (selectInfo) {
        const { grade_id, class_id, subject_id, course_id } = selectInfo;
        this.searchParams.gradeValue = grade_id;

        console.info(grade_id, class_id, subject_id, course_id, "============");
        if (class_id) {
          this.searchParams.classValue = class_id;
          this.getClassOptions();
        }

        if (subject_id || subject_id === 0) {
          this.searchParams.courseValue = subject_id;
          this.getSubjectOptions();
        }

        if (course_id) {
          this.searchParams.className = course_id;
          this.getClassNameOptions(selectInfo.teacher_id);
        }
      }
    }
  },

  mounted() {
    this.getGradeOptions();
  }
};
</script>
<style lang="scss" scoped>
.select_container {
  display: flex;

  .header_select {
    margin: 0 20px;
  }
}

/deep/ .el-popper {
  background-color: #001632 !important;
  border-color: #001632 !important;

  .popper__arrow {
    &::after {
      top: 0;
      border-bottom-color: #001632 !important;
    }
  }

  .el-select-dropdown__item {
    &.selected {
      background-color: #263850 !important;
      color: #fff;
    }
    &:hover,
    &.hover {
      background-color: #263850 !important;
      color: #fff;
    }
  }
}
</style>
